<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>百度爱玩 - 图片轮换效果</title>
		<link rel="stylesheet" type="text/css" href="css/slide.css" media="all" />
		<script src="js/startmove.js"></script>
	</head>

	<body>
		<div id="mp-banner" class="mp-banner">
			<div id="j-banner" class="mp-banner-wrap">
				<div class="mp-banner-inner">
					<ul class="mp-banner-ct mp-clearfix" id="mp-banner-ct">
						<li class="mp-banner-item">
							<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
							<div class="mp-banner-back">
								<div class="mp-btn-start">开始游戏</div>
							</div>
							<div class="mp-banner-front">
								<img width="237" height="163" alt="剑宗" src="images/1.jpg" class="mp-banner-img">
								<div class="mp-banner-footer2">
									<span class="num">1</span>
									<h3>剑宗</h3>
									<span class="role">角色扮演</span>
								</div>
								<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
							</div>
						</li>
						<li class="mp-banner-item">
							<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
							<div class="mp-banner-back">
								<div class="mp-btn-start">开始游戏</div>
							</div>
							<div class="mp-banner-front">
								<img width="237" height="163" alt="剑宗" src="images/2.jpg" class="mp-banner-img">
								<div class="mp-banner-footer2">
									<span class="num">1</span>
									<h3>剑宗</h3>
									<span class="role">角色扮演</span>
								</div>
								<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
							</div>
						</li>
						<li class="mp-banner-item">
							<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
							<div class="mp-banner-back">
								<div class="mp-btn-start">开始游戏</div>
							</div>
							<div class="mp-banner-front">
								<img width="237" height="163" alt="剑宗" src="images/3.jpg" class="mp-banner-img">
								<div class="mp-banner-footer2">
									<span class="num">1</span>
									<h3>剑宗</h3>
									<span class="role">角色扮演</span>
								</div>
								<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
							</div>
						</li>
						<li class="mp-banner-item">
							<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
							<div class="mp-banner-back">
								<div class="mp-btn-start">开始游戏</div>
							</div>
							<div class="mp-banner-front">
								<img width="237" height="163" alt="剑宗" src="images/4.jpg" class="mp-banner-img">
								<div class="mp-banner-footer2">
									<span class="num">1</span>
									<h3>剑宗</h3>
									<span class="role">角色扮演</span>
								</div>
								<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
							</div>
						</li>
						<li class="mp-banner-item">
							<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
							<div class="mp-banner-back">
								<div class="mp-btn-start">开始游戏</div>
							</div>
							<div class="mp-banner-front">
								<img width="237" height="163" alt="剑宗" src="images/5.jpg" class="mp-banner-img">
								<div class="mp-banner-footer2">
									<span class="num">1</span>
									<h3>剑宗</h3>
									<span class="role">角色扮演</span>
								</div>
								<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
							</div>
						</li>
						<li class="mp-banner-item">
							<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
							<div class="mp-banner-back">
								<div class="mp-btn-start">开始游戏</div>
							</div>
							<div class="mp-banner-front">
								<img width="237" height="163" alt="剑宗" src="images/6.jpg" class="mp-banner-img">
								<div class="mp-banner-footer2">
									<span class="num">1</span>
									<h3>剑宗</h3>
									<span class="role">角色扮演</span>
								</div>
								<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
							</div>
						</li>
					</ul>
				</div>
				<div id="j-banner-side" class="mp-banner-aside">
					<h3 class="title">大家都爱玩<i class="mp-icon mp-icon-hot hot"></i></h3>
					<ul class="list">
						<li class="list-item">
							<a target="_blank" href="#">
								<img alt="大天使之剑" src="images/s1.jpg" class="pic">
								<div class="txt">
									<h4 class="name">大天使之剑</h4>
									<p class="role">战争策略</p>
									<p class="platform">37游戏</p>
								</div>
							</a>
						</li>
						<li class="list-item">
							<a target="_blank" href="#">
								<img alt="大天使之剑" src="images/s2.jpg" class="pic">
								<div class="txt">
									<h4 class="name">大天使之剑</h4>
									<p class="role">战争策略</p>
									<p class="platform">37游戏</p>
								</div>
							</a>
						</li>
						<li class="list-item">
							<a target="_blank" href="#">
								<img alt="大天使之剑" src="images/s3.jpg" class="pic">
								<div class="txt">
									<h4 class="name">大天使之剑</h4>
									<p class="role">战争策略</p>
									<p class="platform">37游戏</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="mp-banner-pager">
					<div class="mp-banner-pager-prev OP_LOG_LINK" id="mp-banner-pager-prev">
						<i class="arrow-left mp-png"></i>
					</div>
					<div class="mp-banner-pager-next OP_LOG_LINK" id="mp-banner-pager-next">
						<i class="arrow-right mp-png"></i>
					</div>
				</div>
			</div>
			<div class="mp-banner-bg">
				<ul>
					<li class="list-item yeyou"></li>
					<li class="list-item wangyou" style="display: none;"></li>
					<li class="list-item xiaoyouxi" style="display: none;"></li>
					<li class="list-item shouyou" style="display: none;"></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			(function(){
			        var box = document.getElementById('j-banner'),
			        	prev = document.getElementById('mp-banner-pager-prev'),
			        	next = document.getElementById('mp-banner-pager-next'),
			        	list = document.getElementById('mp-banner-ct'),
			        	items = list.getElementsByTagName('li'),
			        	len = items.length;
			        	liWidth = items[0].offsetWidth + 20;
						selectNum = 2;     //设定一下切换几个   	
			        	timer = null;
			
					setWith();
			        function setWith() {
			        	list.style.width = liWidth * items.length + 'px';
			        }
					
					setWith();
					
			        prev.onclick = function(){
						for(var i = 0; i < selectNum; i++) {
							var curItem = items[i].cloneNode(true);
							list.appendChild(curItem);
							setWith();
						}
						
						startMove(list,{left:-(liWidth * selectNum)},function(){
							for(var i = 0;i < selectNum; i++) {
								list.removeChild(items[0]);
								list.style.left = 0;
							}
						});
					
			        }
			
			        next.onclick = function(){
						for(var i = selectNum-1,j=0 ;i >= 0 ; i--) {
							//此处为bug修改，测试设置一下换两个有问题，又加了一个临时变量j来控制待克隆节点的左边
							var curItem = items[len-(i+(++j))].cloneNode(true);
							list.insertBefore(curItem,list.childNodes[0]);
							setWith();
						}
						list.style.left = -liWidth * selectNum + 'px';
						//console.log(list.style.left);
						startMove(list,{left:0},function(){
							for(var i = selectNum-1 ;i >= 0 ; i--) {
								list.removeChild(items[len-1]);
								
							}
							
						});
					
			        }
					timer = setInterval(play, 4000);
			        box.onmouseover = function(){
			            prev.style.display = 'block';
			            next.style.display = 'block';
			            clearInterval(timer);
			        }
			        box.onmouseout = function(){
			            prev.style.display = 'none';
			            next.style.display = 'none';
			            timer = setInterval(play, 4000);
			        }
			
			        function play(){
			            next.onclick();
			        }

			
			    }());
		</script>
	</body>

</html>